<template>
  <div class="Breadcrumb">
    <el-breadcrumb separator="/" class="biaoqian">
      <el-breadcrumb-item :to="{ path: '/studentInterface' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程查看</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
  </div>
  <div class="showUnTicketInfo">
    <div class="box">
      <el-form ref="queryForm" size="middle" :inline="true" style="padding-left: 20px">
        <el-form-item label="课程名称">
          <el-input v-model="queryForm.courseName" placeholder="课程名称" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="上课学期">
          <el-select placeholder="上课学期" v-model="queryForm.semesterId" clearable style="width: 240px">
            <el-option v-for="e in semester" :key="e" :value="e.id" :label="e.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课地点">
          <el-input v-model="queryForm.classroomName" placeholder="上课地点" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button @click="handleSearch" type="primary" :icon="Search" size="mini">搜索</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button @click="handleReset" :icon="Refresh" size="mini">重置</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>

    <div class="box-content">
      <el-table :data="dataList" height="450" style="width: 100%">
        <el-table-column label="课程名称" prop="courseName" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="上课学期" prop="semester" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="上课时间" prop="weeks,dayOfWeek,session" align="center">
          <template #default="scope">
            <span>{{ scope.row.session }}周，{{ scope.row.dayOfWeek }}，{{ scope.row.session }}节次</span>
          </template>
        </el-table-column>
        <el-table-column label="上课地点" prop="classroomName" align="center" />
        <el-table-column label="上课班级" prop="className" align="center" />
        <el-table-column label="上课人数" prop="attendence" align="center" />
        <el-table-column label="授课教师" prop="teacherName" align="center" />
        <el-table-column label="上课院系" prop="departmentName" align="center" />
      </el-table>
      <div class="pagination">
        <el-pagination layout="prev, pager, next" :total=pageTotal :page-size="pageSize"
          v-model:current-page="curPage" />
      </div>
    </div>
  </div>

</template>

<script>
import api from '@/api/api';
import { Delete, Edit, Search, Share, Upload, Refresh, Plus } from '@element-plus/icons-vue'

export default {
  mounted() {
    this.getData()
    api.semester.get_all().then((res) => {
      this.semester = res.data.data
    }).catch((err) => {
      console.log(err)
    })
  },
  data() {
    return {
      dataList: [],
      curPage: 1,
      pageSize: 5,
      pageTotal: 0,
      queryForm: {
        'courseName': '',
        'semesterId': '',
        'classroomName': '',
      },
      semester: [
        // 有id, name, weekCount, isCurrentSemester字段
      ],
    }
  },
  methods: {
    getData() {
      api.scheduled_course.page_by_student_id(sessionStorage.getItem('userid'), this.curPage, this.pageSize, this.queryForm.courseName,
        this.queryForm.semesterId, this.queryForm.classroomName
      )
        .then((res) => {
          this.dataList = res.data.data.records
          this.pageTotal = res.data.data.total
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleSearch() {
      this.getData()
    },
    handleReset() {
      this.queryForm.courseName = ''
      this.queryForm.semesterId = ''
      this.queryForm.classroomName = ''
      this.getData()
    },
  },
  watch: {
    curPage(newValue, oldValue) {
      this.getData()
    }
  },
  computed: {
    Search() {
      return Search
    },
    Refresh() {
      return Refresh
    },
    Plus() {
      return Plus
    },
    Edit() {
      return Edit
    },
    Delete() {
      return Delete
    }
  }


}
</script>

<style></style>